<template>
    <view class="page">
        <view class="page-flex-top">
            <view class="nav">
                <view v-for="(item, index) in IndexClassify" :key="index" :class="{'nav-item':true,'active':Index==index}"  @click="navChange(index)">
                    <text class="nav-item-text">{{item.name}}</text>
                    <view class="nav-item-line"></view>
                </view>
                <view :class="{'nav-item':true,'active': Index == IndexClassify.length}" @click="navChange(IndexClassify.length)" v-if="IndexClassify.length==0">
                    <text class="nav-item-text">活动</text>
                    <view class="nav-item-line"></view>
                </view>
                <view :class="{'nav-item':true,'active': Index == IndexClassify.length}" @click="navChange(IndexClassify.length)" v-if="IndexClassify.length>0">
                    <text class="nav-item-text">活动</text>
                    <view class="nav-item-line"></view>
                </view>
                <view class="search-btn" @click="skipsearch">
                    <img :src="File_Url+'search-icon.png'" />
                </view>
            </view>
        </view>
<!--        <view class="screen-nav" v-if="Index!=IndexClassify.length">-->
<!--            <view class="screen-nav-item">-->
<!--                <picker class="nav-item-picker" mode="selector" :value="industryItem" :range="industry" @change="industryChange">-->
<!--                    <text>{{industry[industryItem].length>4?industry[industryItem][0]+industry[industryItem][1]+industry[industryItem][2]+industry[industryItem][3]+'...':industry[industryItem]}}</text>-->
<!--                    <img :src="File_Url+'bottom-grey.png'" />-->
<!--                </picker>-->
<!--            </view>-->
<!--            <view class="screen-nav-item">-->
<!--                <picker class="nav-item-picker" mode="region" :value="region" :custom-item="customItem" @change="regionChange">-->
<!--                    <text>{{(region[2]==''?(region[1]==''?(region[0]==''?'地区':region[0]):region[1]):region[2])}}</text>-->
<!--                    <img :src="File_Url+'bottom-grey.png'" />-->
<!--                </picker>-->
<!--            </view>-->
<!--            <view class="screen-nav-item">-->
<!--                <picker class="nav-item-picker" mode="selector" :value="hotItem" :range="hot" @change="hotChange">-->
<!--                    <text>{{hot[hotItem]}}</text>-->
<!--                    <img :src="File_Url+'bottom-grey.png'" />-->
<!--                </picker>-->
<!--            </view>-->
<!--        </view>-->
        <view class="news-list">
            <view class="news-item-a" v-for="(item,index) in newsList" :key="index" @click="skipNewsDetail(item.id)" v-if="Index!=IndexClassify.length">
                <view class="news-item-left">
                    <view class="item-content-text">
                        {{item.title}}
                    </view>
                    <view class="item-content-tip">
                        <view v-for="(ite,ind) in item.lable_array" :key="ind">{{ite}}</view>
                    </view>
                    <view class="item-content-time">
                        {{item.updated_at.split(' ')[0]}}
                    </view>
                </view>
                <view class="news-item-right">
                    <img :src="item.img_url" mode="aspectFill"/>
                </view>
            </view>
            <view class="news-item-b" v-for="(item,index) in activityList" :key="index" @click="skipActivityDetail(item.id)" v-if="Index==IndexClassify.length">
                <view class="news-item-top">
                    <img :src="item.img_url" mode="aspectFill"/>
                    <img v-if="item.active_party_Info.type==1" class="icon" :src="File_Url+'official-activity.png'" />
                </view>
                <view class="news-item-bottom">
                    <view class="news-content-text">
                        {{item.name}}
                    </view>
                    <view class="news-content-time">{{item.created_at.split(' ')[0]}}</view>
                </view>
            </view>
            <view class="null" v-if="activityTotal == activityList.length&&activityTotal>0">
                <text>没有更多了哦～</text>
            </view>
            <view class="null" v-if="activityList.length==0&&newsList.length == 0">
                <text>暂无数据~</text>
            </view>
            <view class="null" v-if="newstTotal == newsList.length&&newstTotal>0">
                <text>没有更多了哦～</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "news",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                Index: 0,
                industry:['全部'],
                industryList:[],
                industryItem: 0,
                region: ['','',''],
                customItem: '全部',
                hot: ['最新','热门'],
                hotItem: 1,
                newsPage: 1,
                newstTotal: 0,
                activityPage: 1,
                activityTotal: 0,
                IndexClassify:[],
                newsList:[],
                activityList:[]
            }
        },
        onShow(){
            this.getNewsClassify();
            this.getIndustryList();
            // this.getActivity();
        },
        //下拉刷新
        onPullDownRefresh(){
            if (this.IndexClassify.length == this.Index){
                this.activityPage = 1;
                this.getActivity();
            } else {
                this.newsPage = 1;
                this.getIndustryList();
            }
            setTimeout(function () {
                uni.stopPullDownRefresh();
            },2000)
        },
        //触底叠加
        onReachBottom(){
            if (this.IndexClassify.length == this.Index){
                if (this.activityTotal != this.activityList.length){
                    this.activityPage++;
                    this.getActivity();
                }
            } else {
                if (this.newstTotal != this.newsList.length){
                    this.newsPage++;
                    this.getIndustryList();
                }
            }
        },
        methods:{
            //获取资讯分类
            async getNewsClassify(){
                let params = { type:'news' };
                const res = await this.$api.getClassify(params);
                if (res.data.level == 'success'){
                    this.IndexClassify = res.data.data
                    if (this.Index<this.IndexClassify.length){
                        this.getNewsList();
                    }else {
                        this.getActivity();
                    }
                }
            },
            // //获取活动分类
            // async getActivityClassify(){
            //     let params = { type:'activity' };
            //     const res = await this.$api.getClassify(params);
            //     if (res.data.level == 'success'){
            //         // console.log(res)
            //         this.IndexClassify = this.IndexClassify.concat(res.data.data)
            //     }
            // },
            //获取资讯列表
            async getNewsList(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    limit: 10,
                    page: this.newsPage,
                    classify_id: this.IndexClassify[this.Index].id,
                    province: this.region[0],
                    city: this.region[1],
                    area: this.region[2],
                    is_hot: this.hotItem,
                }
                if (this.industryItem!=0){
                    params.industry_id = this.industryList[this.industryItem-1].id;
                }
                const res = await this.$api.getNewsList(params);
                if (res.data.level == 'success'){
                    if (this.newsPage==1){
                        this.newsList = res.data.data
                    } else {
                        this.newsList = this.newsList.concat(res.data.data)
                    }
                    this.newstTotal = res.data.page_info.total;
                }
            },
            //获取活动列表
            async getActivity(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    limit: 10,
                    page: this.activityPage
                }
                const res = await this.$api.getActivity(params);
                if (res.data.level == 'success'){
                    if (this.activityPage == 1){
                        this.activityList = res.data.data
                    }else {
                        this.activityList = this.activityList.concat(res.data.data)
                    }
                    this.activityTotal = res.data.page_info.total;
                }
            },
            //获取行业列表
            async getIndustryList(){
                const res = await this.$api.getIndustryList();
                if (res.data.level == 'success'){
                    this.industryList = res.data.data
                    for (let i = 0; i< res.data.data.length ; i++){
                        this.industry.push(res.data.data[i].name);
                    }
                }
            },
            //nav切换
            navChange(id){
                this.Index = id;
                this.region = ['','',''];
                this.hotItem = 1;
                this.industryItem = 0
                if (id == this.IndexClassify.length){
                    this.getActivity();
                    this.newsList = [];
                    this.newsPage = 1;
                } else {
                    this.getNewsList()
                    this.activityList = [];
                    this.activityPage = 1;
                }
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 0
                })
            },
            industryChange(e){
                console.log(e)
                this.industryItem = e.detail.value;
                this.getNewsList()
            },
            regionChange(e){
                console.log(e)
                this.region = e.detail.value;
                if (this.region[0]=='全部') {
                    this.region[0]= '';
                }
                if (this.region[1]=='全部') {
                    this.region[1]= '';
                }
                if (this.region[2]=='全部') {
                    this.region[2]= '';
                }
                this.getNewsList()
            },
            hotChange(e){
                console.log(e)
                this.hotItem = e.detail.value;
                this.getNewsList()
            },
            //跳转搜索页面
            skipsearch(){
                uni.navigateTo({
                    url:'/pages/search/search'
                })
            },
            //跳转资讯详情页面
            skipNewsDetail(id){
                uni.navigateTo({
                    url:'/pages/details/newsDetail/newsDetail?newsId='+id
                })
            },
            //跳转活动详情页面
            skipActivityDetail(id){
                uni.navigateTo({
                    url:'/pages/details/activityDetail/activityDetail?activityId='+id
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        background: #F8F8F8;
        padding-top: 88rpx;
        min-height: calc(100vh - 88rpx);
    }
    .page-flex-top{
        position: fixed;
        top: 0;
        left: 0;
        height: 88rpx;
        width: 100vw;
        background: #ffffff;
        z-index: 9999;
        .nav{
            @include flex(flex-start);
            flex-direction: row;
            padding: 0 120rpx 0 30rpx;
            width: calc(100vw - 150rpx);
            @include scrolling(scroll,hidden);
            .nav-item{
                padding: 0 26rpx;
                height: 88rpx;
                @include flex();
                flex-direction: column;
                .nav-item-text{
                    color: #333333;
                    font-size: 34rpx;
                    line-height: 48rpx;
                    height: 48rpx;
                    font-weight: ceil(500);
                }
            }
            .active{
                .nav-item-text{
                    color: #3782FF;
                    font-size: 40rpx;
                    line-height: 56rpx;
                    height: 56rpx;
                    font-weight: ceil(600);
                    margin: 12rpx;
                }
                .nav-item-line{
                    width: 40%;
                    height: 8rpx;
                    background: #3782FF;
                    border-radius: 4rpx;
                }
            }
            .search-btn{
                position: absolute;
                right: 0;
                top: 0;
                background: #FFFFFF;
                width: 60rpx;
                height: 60rpx;
                padding: 14rpx 30rpx;
            }
        }
    }
    .screen-nav{
        padding: 0 30rpx;
        background: #F8F8F8;
        @include flex();
        flex-direction: row;
        .screen-nav-item{
            width: 33.3%;
            .nav-item-picker{
                padding:24rpx 0;
                @include flex();
                flex-direction: row;
                text{
                    font-size: 28rpx;
                    line-height: 40rpx;
                    height: 40rpx;
                    color: #999999;
                }
                img{
                    width: 30rpx;
                    height: 34rpx;
                    padding: 3rpx;
                    vertical-align: middle;
                }
            }
        }
    }
    .news-list{
        .news-item-a{
            padding: 30rpx;
            @include flex(flex-start);
            flex-direction: row;
            border-bottom: 2rpx solid #E5E5E5;
            background: #ffffff;
            .news-item-left{
                width: calc(100% - 282rpx);
                height: 180rpx;
                .item-content-text{
                    @include ellipsis(2);
                    height: 84rpx;
                    line-height: 42rpx;
                    font-size: 30rpx;
                    margin-bottom: 16rpx;
                }
                .item-content-tip{
                    @include flex(flex-start);
                    padding-bottom: 16rpx;
                    flex-direction: row;
                    view{
                        height: 40rpx;
                        padding: 0 16rpx;
                        background: #3782FF;
                        border-radius: 8rpx;
                        font-size: 26rpx;
                        line-height: 40rpx;
                        margin-right: 10rpx;
                        color: #FFFFFF;
                    }
                }
                .item-content-time{
                    height: 28rpx;
                    line-height: 28rpx;
                    font-size: 24rpx;
                    color: #9B9B9B;
                }
            }
            .news-item-right{
                margin-left: auto;
                width: 260rpx;
                height: 180rpx;
                border-radius: 10rpx;
                overflow: hidden;
            }
        }
        .news-item-b{
            margin-top: 10rpx;
            padding: 30rpx 30rpx 20rpx 30rpx;
            border-bottom: 2rpx solid #E5E5E5;
            background: #FFFFFF;
            .news-item-top{
                width: 100%;
                height: 360rpx;
                overflow: hidden;
                border-radius: 10rpx;
                position: relative;
                .icon{
                    position: absolute;
                    top: 0;
                    right: 0;
                    height: 120rpx;
                    width: 120rpx;
                }
            }
            .news-item-bottom{
                padding-top: 18rpx;
                .news-content-text{
                    width: 100%;
                    max-height: 84rpx;
                    line-height: 42rpx;
                    @include ellipsis(2);
                    margin-bottom: 10rpx;
                    font-size: 30rpx;
                }
                .news-content-time{
                    font-size: 24rpx;
                    height: 28rpx;
                    line-height: 28rpx;
                    color: #9B9B9B;
                }
            }
        }
        .news-list-bottom{
            padding: 23rpx 0;
            @include flex();
            flex-direction: column;
            text{
                height: 40rpx;
                line-height: 40rpx;
                font-size: 28rpx;
                color: #B5B5B5;
            }
        }
    }
</style>
